<template>
  <div class="refine_sosforce">
    <h2 class="titleblue">搜救力量</h2>
    <div class="contant">
      <div class="plan-operate">
        <div @click="addShips" class="fl create" v-show="sysShow">新增船舶</div>
        <div @click="addAircraft" class="fl create" v-show="syShow">新增飞行器</div>
        <div class="fr" v-if="plantabs=='first'">
          <label>搜救机构</label>
          <el-select clearable v-model="department" class="select-width-100" @change="searchBerth">
            <el-option v-for="item in dpOptions" :key="item.value" :label="item.name" :value="item.id">
            </el-option>
          </el-select>
          <label>救助力量</label>
          <el-select clearable v-model="powerType" class="select-width-100" @change="searchBerth">
            <el-option v-for="item in ptOptions" :key="item.value" :label="item.name" :value="item.id">
            </el-option>
          </el-select>
          <label>船舶类型</label>
          <el-select clearable v-model="type" class="select-width-100" @change="searchBerth">
            <el-option v-for="item in typeOptions" :key="item.value" :label="item.name" :value="item.id">
            </el-option>
          </el-select>
        </div>
        <div class="fr" v-if="plantabs=='second'">
          <label>搜救机构</label>
          <el-select clearable v-model="departments" class="select-width-100" @change="searchCraft">
            <el-option v-for="item in dpOption" :key="item.value" :label="item.name" :value="item.id">
            </el-option>
          </el-select>
          <label>机型</label>
          <el-select clearable v-model="jxType" class="select-width-100" @change="searchCraft">
            <el-option v-for="item in jxOptions" :key="item.value" :label="item.name" :value="item.id">
            </el-option>
          </el-select>
        </div>
      </div>

      <el-tabs v-model="plantabs" type="card" @tab-click="handleClick">
        <el-tab-pane label="船舶" name="first">
          <data-table :page='currentPage' :head="thead1" :data="tableData1" :operate="toptions"
                      :actions="['edit','view','del']"
                      @callback="manipulate" class="intendance-table"></data-table>
        </el-tab-pane>
        <el-tab-pane label="飞行器" name="second">
          <el-table ref="multipleTable" :data="tableData2" tooltip-effect="dark" style="width: 100%" border stripe>
            <el-table-column prop="d_id" label="序号" width="60" align="center">
              <template slot-scope="scope">
                <span v-if='scope.$index!=9'>{{(currentPage1-1).toString()+parseInt(scope.$index+1)}}</span>
                <span v-else>{{currentPage1+'0'}}</span>
              </template>
            </el-table-column>
            <el-table-column label="经纬度" align="center" width="220">
              <template slot-scope="scope">
                <div class="fl w160">
                  <div class="ndiv">
                    <el-input v-model="scope.row.latitude"></el-input>
                    <span v-if="scope.row.idiv=='N'" @click='n(scope.row.idiv,scope.$index)'>N</span>
                    <span v-else @click='n(scope.row.idiv,scope.$index)'>S</span>
                  </div>
                  <div class="ndiv">
                    <el-input v-model="scope.row.longitude"></el-input>
                    <span v-if="scope.row.ediv=='E'" @click='e(scope.row.ediv,scope.$index)'>E</span>
                    <span v-else @click='e(scope.row.ediv,scope.$index)'>W</span>
                  </div>
                </div>
                <div class="fr cancel" @click="save(scope.row)">保存</div>
              </template>
            </el-table-column>
            <el-table-column prop="sosOrg" label="搜救机构" align="center">
              <template slot-scope="scope">
                <div v-if="scope.row.sosOrg && scope.row.sosOrg.id == item.id" v-for="(item, index) in dpOption"
                     :key="index">{{item.name}}
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="company" label="单位" align="center">
            </el-table-column>
            <el-table-column prop="telephone" label="电话" align="center" width="120">
            </el-table-column>
            <el-table-column prop="machineNo" label="机号" align="center">
            </el-table-column>
            <el-table-column prop="model" label="机型" align="center">
              <template slot-scope="scope">
                <div v-if="scope.row.model && scope.row.model == item.id" v-for="(item, index) in jxOptions"
                     :key="index">{{item.name}}
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="maxVoyage" label="最大航程" align="center">
            </el-table-column>
            <el-table-column prop="maxMan" label="成员人数" align="center">
            </el-table-column>
            <el-table-column prop="maxFlight" label="最大飞行速度(kts)" align="center">
            </el-table-column>
            <el-table-column prop="operate" label="操作" align="center" width="100">
              <template slot-scope="scope">
                <!--v-if="scope.row.cu_id==username||scope.row.cuId==username||aadmin"-->
                <el-button size="mini" type="text" @click="editVehicle(scope.row)">编辑</el-button>
                <el-button size="mini" type="text" @click="lookVehicle(scope.row)">查看</el-button>
                <el-button size="mini" type="text" @click="delVehicle(scope.row)">删除</el-button>
                <!--v-if="scope.row.cu_id==username||scope.row.cuId==username||aadmin"-->
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>

      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                     :current-page.sync="currentPage" layout="total,prev, pager, next, jumper"
                     :total="totalPage1" background v-if="plantabs=='first'">
      </el-pagination>
      <el-pagination @size-change="handleSizeChange1" @current-change="handleCurrentChange1"
                     :current-page.sync="currentPage1"
                     layout="total,prev, pager, next, jumper" :total="totalPage2" background v-if="plantabs=='second'">
      </el-pagination>
    </div>

    <el-dialog title="" :visible.sync="adddialog" width="80%" append-to-body @close="close1" @open='asd=true'>
        <span>
            <router-view :dpOptions="dpOptions" :dpOption="dpOption" :ptOptions="ptOptions" :typeOptions="typeOptions"
                         :navOption="navOption"
                         :jxOptions="jxOptions" :id="ddid" :detail="detail" @close="close" @update="update"
                         v-if="asd"></router-view>
        </span>
    </el-dialog>
  </div>
</template>

<script>
  import DataTable from '@/components/common/DataTable.vue'
  import dictService from '@/services/DictionaryService.js'
  import sosOrgService from '@/services/SosOrgService.js'
  import * as sosShipService from '@/services/SosShipService.js'
  import sosFlyDeviceService from '@/services/SosFlyDeviceService.js'
  import coordinateTransform from '@/utils/coordinateTransform.js'
  import moment from 'moment'

  export default {
    name: 'SosPower',
    components: {
      'data-table': DataTable
    },
    watch: {
      lat (old, newVal) {
      }
    },
    data: function () {
      return {
        department: '',
        powerType: '',
        type: '',
        departments: '',
        jxType: '',
        longitude: '',
        latitude: '',
        adddialog: false,
        ddid: '',
        id: '',
        plantabs: 'first',
        ptOptions: [],
        toptions: [],
        dpOptions: [],
        typeOptions: [],
        dpOption: [],
        jxOptions: [],
        thead1: [
          {
            name: '搜救机构',
            prop: 'sosOrg'
          },
          {
            name: '救助力量',
            prop: 'powerType'
          },
          {
            name: '单位',
            prop: 'company'
          },
          {
            name: '电话',
            prop: 'ownerTelephone'
          },
          {
            name: '船名',
            prop: 'shipName'
          },
          {
            name: '航区',
            prop: 'sailingAreaName'
          },
          {
            name: '船舶类型',
            prop: 'shipType'
          },
          {
            name: '船长',
            prop: 'shipWidth'
          },
          {
            name: '总吨',
            prop: 'grossTonnage'
          }
        ],
        tableData1: [],
        tableData2: [],
        currentPage: 1,
        currentPage1: 1,
        totalPage1: 1,
        totalPage2: 1,
        currentPag: 1,
        pageSize: 10,
        detail: '',
        asd: true,
        sjjg: [],
        sjll: [],
        vsjjg: [],
        sjhq: [],
        username: '',
        sysShow: true,
        syShow: true,
        aadmin: JSON.parse(localStorage.getItem('admin')),
        navOption: []
      }
    },
    created () {
      this.getSelect()
      this.getData(0)
    },
    methods: {
      handleQuery (param) {
        var query = ''
        if (param.department) {
          query += 'sosOrg.id==' + param.department
        } else if (param.departments) {
          query += 'sosOrg.id==' + param.departments
        }
        if (param.powerType) {
          if (query.length) {
            query += ';'
          }
          query += 'powerType==' + param.powerType
        } else if (param.jxType) {
          if (query.length) {
            query += ';'
          }
          query += 'model==' + param.jxType
        }
        if (param.type) {
          if (query.length) {
            query += ';'
          }
          query += 'shipType==' + param.type
        }
        return query
      },
      async searchBerth () {
        this.currentPage = 1
        let param = {
          department: this.department,
          powerType: this.powerType,
          type: this.type
        }
        let query = await this.handleQuery(param)
        this.getData(0, query)
      },
      async searchCraft () {
        this.currentPage1 = 1
        let param = {
          departments: this.departments,
          jxType: this.jxType
        }
        let query = await this.handleQuery(param)
        this.getData(0, query)
      },
      getSelect () {
        if (this.dpOptions.length == 0) {
          sosOrgService.searchTree('').then(res => {
            this.dpOptions = res
            this.dpOption = res
          })
        }
        dictService.find('HQ').then(res => {
          this.navOption = res
        })
        if (this.ptOptions.length == 0) {
          dictService.find('SJLLLX').then(res => {
            this.ptOptions = res
          })
        }
        if (this.typeOptions.length == 0) {
          dictService.find('SJCBLX').then(res => {
            this.typeOptions = res
          })
        }
        if (this.jxOptions.length == 0) {
          dictService.find('FXQ').then(res => {
            this.jxOptions = res
          })
        }
      },
      getData (num, query) {
        if (this.plantabs == 'first') {
          sosShipService.search(num, query).then(res => {
            this.totalPage1 = parseInt(res.headers['x-total-count'])
            let arr = res.data.map(item => {
              if (item.sosOrg) item.sosOrg = item.sosOrg.name
              if (item.shipType) {
                this.typeOptions.forEach(val => {
                  if (val.id == item.shipType) {
                    item.shipType = val.name
                  }
                })
              }
              if (item.powerType) {
                this.ptOptions.forEach(val => {
                  if (val.id == item.powerType) {
                    item.powerType = val.name
                  }
                })
              }
              if (item.sailingAreaName) {
                this.navOption.forEach(val => {
                  if (val.id == item.sailingAreaName) {
                    item.sailingAreaName = val.name
                  }
                })
              }
              return item
            })
            this.tableData1 = arr
          })
        } else if (this.plantabs == 'second') {
          sosFlyDeviceService.searchData(num, query).then(res => {
            this.totalPage2 = res.dataCount
            let arr = res.data.map(item => {
              if (item.latitude) {
                item.latitude = coordinateTransform.change(item.latitude, 'toTime')
              }
              if (item.longitude) {
                item.longitude = coordinateTransform.change(item.longitude, 'toTime')
              }
              return item
            })
            this.tableData2 = arr
          })
        }
      },
      reGetData: function (val) {
        if (this.department) {
          this.getData(val, this.department)
        } else if (this.powerType) {
          this.getData(val, this.powerType)
        } else if (this.type) {
          this.getData(val, this.type)
        } else if (this.departments) {
          this.getData(val, this.departments)
        } else if (this.jxType) {
          this.getData(val, this.jxType)
        } else {
          this.getData(val, '')
        }

      },
      save (row) {
        let obj = {
          company: row.company,
          contact: row.contact,
          cruSpeed: row.cruSpeed,
          latitude: row.latitude ? coordinateTransform.change(row.latitude, 'toDeg') : '',
          longitude: row.longitude ? coordinateTransform.change(row.longitude, 'toDeg') : '',
          machineNo: row.machineNo,
          maxFlight: row.maxFlight,
          maxMan: row.maxMan,
          maxVoyage: row.maxVoyage,
          model: row.model,
          name: row.name,
          remark: row.remark,
          sosOrg: row.sosOrg,
          telephone: row.telephone
        }
        obj.id = row.id
        obj.createTime = row.createTime
        sosFlyDeviceService.update(obj).then(res => {
          if (res) {
            this.$message({
              type: 'success',
              message: '保存成功!'
            })
            this.getData(0)
          }
        })
      },
      delVehicle (row) {
        this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(() => {
            sosFlyDeviceService.delete(row.id).then(res => {
              this.$message({
                type: 'success',
                message: '删除成功!'
              })
              this.getData(0)
            })
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            })
          })
      },
      addShips () {
        this.adddialog = true
        this.$router.push('/sos-power/create-berth')
        this.ddid = ''
        this.detail = 'create'
      },
      addAircraft () {
        this.adddialog = true
        this.$router.push('/sos-power/create-aerocraft')
        this.ddid = ''
        this.detail = 'create'
      },
      manipulate (param) {
        if (param.action == 'edit') {
          this.adddialog = true
          this.$router.push({name: 'CreateBerth', params: param})
          // this.ddid = item.d_id
          this.detail = 'edit'
        }
        if (param.action == 'view') {
          this.adddialog = true
          this.$router.push({name: 'CreateBerth', params: param})
          // this.ddid = item.d_id
          this.detail = 'look'
        }
        if (param.action == 'del') {
          sosShipService.deleteById(param.data.id).then(res => {
            this.getData(0)
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
          })
        }
      },
      editVehicle (param) {
        // var item = this.tableData2[id]
        this.adddialog = true
        this.$router.push({name: 'CreateAerocraft', params: param})
        // this.ddid = item.d_id
        this.detail = 'edit'
      },
      lookVehicle (param) {
        // var item = this.tableData2[id]
        this.adddialog = true
        this.$router.push({name: 'CreateAerocraft', params: param})
        // this.ddid = item.d_id
        this.detail = 'look'
      },

      handleClick (tab, event) {
        this.getData(0)
      },
      handleSizeChange (val) {
        this.reGetData(val - 1)
      },
      handleCurrentChange (val) {
        this.reGetData(val - 1)
      },
      handleCurrentChange1 (val) {
        this.reGetData(val - 1)
      },
      handleSizeChange1 (val) {
        this.reGetData(val - 1)
      },
      close () {
        this.adddialog = false
        this.asd = false
        this.getData(0)
      },
      close1 () {
        this.adddialog = false
        // this.$router.go(-1);
        this.$router.push('/sos-power')
      },
      update () {
        this.adddialog = false
        this.getData(this.currentPage)
      },

      n (row, index) {
        let obj = {}
        if (row.lastIndexOf('N') == -1) {
          obj = this.tableData2[index]
          obj.idiv = 'N'
          this.$set(this.tableData2, index, obj)
        } else {
          obj = this.tableData2[index]
          obj.idiv = 'S'
          this.$set(this.tableData2, index, obj)
        }
      },
      e (row, index) {
        let objs = {}
        if (row.lastIndexOf('E') == -1) {
          objs = this.tableData2[index]
          objs.ediv = 'E'
          this.$set(this.tableData2, index, objs)
        } else {
          objs = this.tableData2[index]
          objs.ediv = 'W'
          this.$set(this.tableData2, index, objs)
        }
      },
    }
  }
</script>

<style lang="scss">
  .refine_sosforce {
    width: 100%;
    display: inline-block;
    padding-bottom: 50px;

    .plan-operate label {
      margin: 0px 5px 0px 10px;
    }

    .el-table__body,
    .el-table__footer,
    .el-table__header {
      width: 100% !important;
    }

    .ndiv {
      width: 100%;
    }

    .ndiv span {
      width: 20px;
      padding: 0 !important;
      height: 20px;
      background: #0062cd;
      color: #fff;
      line-height: 20px;
      text-align: center;
      margin-top: 2px;
      display: block;
      float: left;
    }

    .select-width-20 {
      width: 20px;
      float: left;
    }

    .select-width-100 {
      width: 175px;
    }

    .w160 .select-width-20 .el-input {
      width: 20px;
    }

    .w160 .select-width-20 .el-input span {
      display: none;
    }

    .select-width-20 input {
      width: 20px;
      padding: 0 !important;
      height: 20px;
      background: #0062cd;
      color: #fff;
      line-height: 20px;
      text-align: center;
      margin-top: 2px;
      display: block;
      float: left;
    }

    .w160 {
      width: 140px;
    }

    .w160 .el-input {
      width: 120px;
      float: left;
      height: 20px;
      line-height: 20px;
    }

    .w160 .ndiv .el-input input {
      margin-top: 2px;
      border-radius: 0px !important;
      height: 20px !important;
      padding: 0px 10px;
      font-size: 12px;
      line-height: 20px !important;
      box-sizing: border-box;
    }

    .fr.cancel {
      width: 48px;
      height: 26px;
      border-radius: 4px;
      border: solid 1px #0062cd;
      padding: 0;
      color: #0062cd;
      line-height: 26px;
      margin-top: 13px;
      cursor: pointer;
    }
  }

</style>
